<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的复习</title>
	</head>
	<body>
		<!-- 定义展现视图 -->
		<div id="app">
			<!-- 调用组件 -->
			<add-copm></add-copm><hr >
			<hello></hello>
			
		</div>
		
		<template id="addNumTem">
			<div >
				<h1>测试组件的用法</h1><hr >
				数据：{{num}}<br>
				<button @click="addNum">自增</button>
			</div>
			
		</template>
		<!-- 定义局部组件的模板标签 -->
		<template id="helloTem">
			<div >
				<h1>局部组建的视图</h1><br>
				数据信息:{{msg}}
			</div>
		</template>
		
		
		<!-- 映入vue配文件 -->
		<script src="../js/vue.js"></script>
		<script>
		// 定义全局组件
		Vue.component("addCopm",{
			// 组件的定义方法，必须要有返回值
			
			data(){
				
				return {
					num: 1
					}
				
			},
			
			// 定义组件的模板
			template:"#addNumTem",
			methods: {
				
				addNum(){
					this.num++
				}
				
			}
		})
		// 在vue、对象里创建了组件名称后，在外面害的定义组件实体
		let hello= {
			data(){
				
				return {
					msg: "我是局部组件一 "
				}
				
			},
			//#获取组件的模板标签的名字
				template: "#helloTem"
			
		}
	
		// 定义vue对象
		const app=new Vue({
			el: '#app',
			data: {
				
			},
			// 在vue的对象里创建局部的组件，只能在我们的vue这个对象里使用
			components: {
				// 定义一个hello的局部组件，名字和组件的内容一样就可以简写
				// 原来是hello： 'hello'
				hello
			},
			methods: {
				
			}
		})
		
		</script>
		
		
	</body>
</html>
